<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--v-for:根据数据生成列表结构
语法：v-for:"（item,index） in 数据名"  item代表数据每一项 index代表索引
数组长度的更新会同步到页面上，是响应式的
-->
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            形容词{{index+1}} {{item}}
        </li>
    </ul>
    <ul>
        <li v-for="item in vegetables" v-text="item.name">
        </li>
    </ul>
    <input type="button" value="添加" @click="add">
    <input type="button" value="删除" @click="remove">
</div>
<script>
   var app=new Vue({
        el:"#app",
       data:{
            arr:["huang","jin","peng","zui","shuai"],
           vegetables:[
               {name:"西兰花炒蛋"},
               {name:"蛋炒西兰花"},
               {name:"西兰花炒鸡胸"},
               {name:"鸡胸炒蛋"},
           ]

       },
       //添加的方法
       methods:{
           add:function () {
               this.vegetables.push({name:"青椒炒肉"})
           },
           remove:function () {
               this.vegetables.shift();//移除最左边的
           }
       }

    })
</script>
</body>
</html>